@font-face {
	font-family:"HannariMincho-Regular";
	src:url(../font/hannari/HannariMincho-Regular.otf) format("opentype");
}
@font-face {
	font-family:"Nagomi Gokuboso Gothic ExLight";
	src:url("../font/nagomigokubosogothic/NagomiGokubosoGothic-ExtraLight.otf") format("opentype");
}
@font-face {
	font-family:"マメロン 3 Hi Regular";
	src:url("../font/mamelon_hireg/Mamelon-3-Hi-Regular.otf") format("opentype");
}
html {
    scroll-behavior: smooth;
}
/*スクロールバーの横幅指定*/
::-webkit-scrollbar {
    width: 8px;
}
/*スクロールバーの背景色・角丸指定*/
::-webkit-scrollbar-track {
  border-radius: 8px;
	background: transparent;
}
/*スクロールバーの色・角丸指定*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
	background:#d3a243 ;
}
body{
	font-family:"Nagomi Gokuboso Gothic ExLight";
	margin:0;
	background-color:#d3cbc6/*#9ea1a3*/;
	/*background-image:url(../image/IMG_0838.png);
	background-size:cover;*/
	background-attachment: fixed;
}
.mokuji{
	background-color:#485859;
	width:60%;
	min-height:100vh;
	margin:0 auto;
	color:white;
	overflow: hidden;
	text-align: center
}

.headSpace{
	height:160px;
}
.listTitle h2{
	font-family:"HannariMincho-Regular";
	font-weight:normal;
	padding-top:1em;
	padding-bottom:0.2em;
	font-size:48px;
	border-bottom:3px solid #d3a243;
	border-image: linear-gradient(to right, transparent, #d3a243 10%, #d3a243 90%, transparent ) 1;
	width:80%;
	margin:0 10%;
}
.listTitle p{
	font-size:20px;
	line-height: 0;
}

.menuButton{
	line-height:5;
}

.menuButton a {
	font-size:32px;
	text-decoration: none;
	color:rgba(255,255,255,1);
	transition:all 0.2s;
}
.menuButton a:hover {
	transition:all 0.2s;
	color:rgba(255,255,255,0.3);
}
.menuList{
	margin-top:1em;
	width:100%;
	float:center;
	font-size:48px;
	padding-bottom:1em;
}
.list{
	display:inline-block;
	position: relative;
	width:100%;
	transition:all 0.3s;
	height:4em;
	background:#485859;
	margin:0;
}

.list::before,
.list::after{
	position: absolute;
	content:"";
	width:0;
	height:2px;
	background:#d3a243;
}
/*上線*/
.list:hover::before {
	top:0;
	left:0;
	animation: lineAnime 0.4s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}
/*下線*/
.list:hover::after { 
	bottom:0;
	right:0;
	animation: lineAnime 0.4s linear 0s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}
@keyframes lineAnime {
	0% {width:0%;}
	100%{width:100%;}
}
.list:hover{
	background-color:rgba(255,255,255,0.1);
	transition:all 0.5s;
	/*color:#485859;*/
}
.list:active{
	background-color:rgba(255,255,255,0.5);
	transition:all 0.1s;
}
.list p{
	position: absolute;/*絶対配置*/
	transform: translate(-50%,-50%);
	transition:all 0.5s;
	top: 50%;
	left: 50%;
	margin:0;
	padding:0;
	user-select: none;
}

.acd-check{
  display: none;
}

.clist{
	overflow-y:scroll;
	scrollbar-width: thin;
	scrollbar-color: #d3a243 transparent;
	visibility: hidden;
	height: 0;
	font-size:20px;
	transition:all 0.5s ease-out;
	border: 1px solid #d3a243;
	border-radius:10px;
	margin:0 10%;
}
.clist h3{
	border-bottom:1px solid #d3a243;
	line-height:1em;
	border-image: linear-gradient(to right, transparent, #d3a243 10%, #d3a243 90%, transparent ) 1;
	width:40%;
	margin:1em 30%;

}
.clist a{
	color:rgba(255,255,255,1);
	text-decoration: none;
	transition:all 0.2s;
}
.clist a:hover {
	transition:all 0.2s;
	color:rgba(255,255,255,0.3);
	/*text-decoration: underline solid;*/
}

.acd-check:checked  + .acd-label + .clist{
	visibility: visible;
	height: 50vh;
	opacity: 1;
	padding:10px;
	margin-top:10px;
	margin-bottom:10px;
	transition:all 0.8s ease-out;
	background-color:rgba(255,255,255,0.1);
}
.tenline{
	display: flex;
	align-items: center;
}
.tenline:before,
.tenline:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さ */
  background: #d3a243; /* 線の色 */
  margin:0 1em; /* 文字と線の余白 */
}
.tenline:before {
  background: linear-gradient(-90deg, #d3a243, transparent);
}

.tenline:after {
  background: linear-gradient(90deg, #d3a243, transparent);
}
.show{
	background-size:contain;                 /* 画像のサイズを指定    */
	width:2em;                              /* 横幅のサイズを指定    */
	height:2em; 
	margin: 1em auto;
	transition:all 0.5s;
	animation: fadeUpAnime 0.8s ease-in-out forwards;
}
.list:hover .show{
	opacity: 0.1;
	transition:all 0.5s;
}
.hove{
	font-size:32px;
	color:transparent;
	transition:all 0.5s;
}
.list:hover .hove{
	color:rgba(255,255,255,1);
	transition:all 0.5s;
{
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px) /*rotate(-16deg)*/;
	}

	to {
		opacity: 1;
		transform: translateY(0) /*transform:rotate(0deg)*/;/*二つ目のtransform外すと中央から外れる　原因不明*/
	}
}